<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简洁美观的登录注册页面</title>
	<style>
		/* 仿CSDN博主News777 */
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box; /* 两个并排的带边框的框 */
		}
		 
		body {
		    background: url("../user/touxiang/background.jpg") no-repeat center center fixed;
		    background-size: cover;
		    height: 100vh;
		}
		 
		.container {
		    position: relative;
		    border-radius: 14px;
		    width: 760px;
		    height: 705px;
		    top: 50%;
		    left: 50%;
		    transform: translate(-50%, -50%);
		    background-color: rgba(0, 0, 0, 0.05);
		    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		}
		 
		.container .main_left,
		.container .main_right,
		.container .way {
		    width: 380px;
		    height: 435px;
		    padding: 50px 30px;
		    position: absolute;
		    text-align: center;
		}
		 
		.container h2 {
		    letter-spacing: 20px;
		    text-indent: 20px;
		    color: #1e647b;
		    font-family: "仿宋";
		}
		 
		.container form {
		    padding-top: 25px;
		    padding-bottom: 25px;
		}
		 
		.container form input {
		    display: inline-block;
		    height: 40px;
		    width: 100%;
		    padding: 0 8px;
		    margin-bottom: 25px;
		    font-size: 16px;
		    outline: none;
		    border: 1px solid rgba(0, 0, 0, 0.3);
		    border-radius: 3px;
		    transition: 0.2s;
		}
		 
		.container form input::placeholder {
		    font-size: 0.9em;
		    color: #6e6969;
		}
		 
		/* 输入框聚焦效果 */
		.container form input:focus {
		    border: 1px solid rgba(0, 0, 0, 0.9);
		}
		 
		.container .form_login p a {
		    text-decoration: none;
		    font-size: 0.9em;
		    color: rgb(2, 174, 174);
		}
		 
		.container .card {
		    width: 160px;
		    height: 40px;
		    position: relative;
		    overflow: hidden;
		    margin: 0 auto;
		}
		 
		.container .songhuashu {
		    width: 160px;
		    height: 40px;
		    position: relative;
		    overflow: hidden;
		    margin: 0 auto;
		}
		 
		button {
		    position: absolute;
		    left: 0;
		    width: 160px;
		    height: 40px;
		    letter-spacing: 16px;
		    text-indent: 16px;
		    border-radius: 5px;
		    border: 0;
		    color: #fff;
		    font-size: 16px;
		    background: linear-gradient(to right, #5d9960, #0b5e2e);
		    cursor: pointer;
		}
		 
		/* 按钮特效参考稀土掘金博主@北极光之夜 */
		.container .card span {
		    position: absolute;
		    transform: translate(-50%,-50%);
		    background-color: rgb(255, 255, 254);
		    border-radius: 50%;
		    animation: big 1.5s;
		}
		 
		.container .songhuashu span {
		    position: absolute;
		    transform: translate(-50%,-50%);
		    background-color: rgb(255, 255, 254);
		    border-radius: 50%;
		    animation: big 1.5s;
		}
		 
		@keyframes big {
		    0% {
		        width: 0;
		        height: 0;
		        opacity: 1;
		    }
		    100% {
		        width: 400px;
		        height: 400px;
		        opacity: 0;
		    }
		}
		 
		.container .main_left .dotted {
		    min-width: 0;
		    display: flex;
		    margin: 20px 14px;
		    align-items: center;
		}
		 
		.container .main_left .dotted .Dot {
		    margin: 0;
		    min-width: 0;
		    border-top: 1px solid;
		    border-color: #969999;
		    width: 124px;
		}
		 
		.container .main_left .dotted .dFont {
		    margin: 0;
		    min-width: 0;
		    color: #999999;
		    font-size: 0.8em;
		    margin-left: 5px;
		    margin-right: 15px;
		    line-height: 17px;
		    white-space: nowrap;
		}
		 
		 
		.active {
		    background-color: rgba(249, 249 , 249, 0.8);
		    border-radius: 6px;
		}
		 
		.container .main_left {
		    transition: all 0.6S ease-in-out;
			height: 705px;
		}
		 
		.container .other {
		    text-align: center;
		    margin-bottom: 10px;
		    display: flex;
		    margin-left: -15px;
		    margin-right: -15px;
		}
		 
		.container .other .icoD {
		    position: relative;
		    width: 100%;
		    padding: 0 15px;
		}
		 
		
		 
		.container .way {
		    position: absolute;
		    left: 50%;
		    transition: all 0.6s ease-in-out;
		}
		 
		.container .way .change_way {
		    margin: 115px 80px 140px;
		    position: relative;
		    white-space: nowrap;
		    border-radius: 14px;
		}
		 
		.container .main_right {
		    left: 50%;
		    display: none;
			height: 705px;
		}
		 
		.container .main_right .btn_register {
		    margin-bottom: 10px;
		}
		 
		.container .pull {
		    left: 0;
		}
		 
		.container .dis {
		    display: block;
		}
		 
		.container .hid {
		    display: none;
		}
	</style>
    
</head>
<body>
    <div class="container">
        <div class="main_left active">
            <br /><br /><br /><br /><br /><br />
            <h2>登录</h2>
            <form method="post" action="dologin.php" class="form_login">
                <input type="text" name="username" placeholder="请输入账号">
                <input type="password" name="password" placeholder="请输入密码">
                <div class="card">
                    <button type="submit" class="btn_login">登录</button>
                </div>
            </form>
        </div>
        <div class="way">
            <div class="change_way">
                <button class="click" onclick="dclick(this)">注册</button>
            </div>
        </div>
        <div class="main_right active">
            <h2>注册</h2>
            <form method="post" action="doregist.php" class="form_register">
                <input type="text" name="username" placeholder="输入用户名">
                <input type="password" name="password" placeholder="密码">
                <input type="text" name="tel" placeholder="手机号">
                <input type="email" name="email" placeholder="邮箱">
                <input type="text" name="name" placeholder="姓名">
                <input type="text" name="sex" placeholder="性别">
                <input type="text" name="address" placeholder="地址">
                <div class="songhuashu">
                    <button type="submit" class="btn_register">注册</button>
                </div>
            </form>
        </div>
    </div>
    <script>
         /* 鼠标点击切换按钮特效 */
        var middlePart = document.querySelector('.way');
        var leftPart = document.querySelector('.main_left');
        var rightPart = document.querySelector('.main_right');
 
        function dclick(e) {
            if (e.textContent == '注册') {
                middlePart.classList.add('pull');
                leftPart.classList.add('hid');
                rightPart.classList.add('dis');
                e.textContent = '登录';
            } else {
                e.textContent = '注册';
                middlePart.classList.remove('pull');
                leftPart.classList.remove('hid');
                rightPart.classList.remove('dis');
            }
        }
 
        /* 鼠标点击登录按钮波纹特效 */
        var card = document.querySelector('.card');
        card.addEventListener('click',function(e){
            
            let x = e.clientX - this.offsetLeft - 360;
            let y = e.clientY - this.offsetTop - 155;
 
            let circle = document.createElement('span');
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';
            
            this.appendChild(circle);
 
            setInterval(function(){
                circle.remove();
            },1000)
        }) 
 
        /* 鼠标点击注册按钮波纹特效 */ 
        var shs = document.querySelector('.songhuashu');
        shs.addEventListener('click', function(e) {
            let x = e.clientX - this.offsetLeft - 760;
            let y = e.clientY - this.offsetTop - 155;
 
            let circle = document.createElement('span');
            circle.style.left = x + 'px';
            circle.style.top = y + 'px';
            
            this.appendChild(circle);
 
            setInterval(function(){
                circle.remove();
            },1000)
        })
    </script>
</body>
</html>